<template>
  <div id="token">
    <div class="max-width container pt-0">
      <h1 class="title">{{ $t(`token.标题`) }}</h1>

      <el-row :gutter="24">
        <el-col :sm="12" :xs="24">
          <img style="width: 100%" src="@/assets/img/logo.png" />
          <div class="fz-14 cl-basic mb-30">
            <div class="mt-10">{{ $t(`token.介绍1`) }}</div>
            <div class="mt-10">{{ $t(`token.介绍2`) }}</div>
          </div>
        </el-col>

        <el-col :sm="12" :xs="24">
          <div class="mb-30">
            <div class="fz-16 fw-bold">
              {{ $t(`token.contract.代币合约`) }}
            </div>

            <ul class="contract">
              <li>
                <span> {{ $t(`token.contract.合约地址`) }}</span>
                <span>{{ $store.state.tokenAddress }}</span>
              </li>
              <li>
                <span> {{ $t(`token.contract.代币符号`) }}</span>
                <span>BCNFT</span>
              </li>
              <li>
                <span> {{ $t(`token.contract.小数点`) }}</span>
                <span>18</span>
              </li>
              <li>
                <span> {{ $t(`token.contract.发行量`) }}</span>
                <span>13,100,000,000,000</span>
              </li>
              <li>
                <span> {{ $t(`token.contract.区块链`) }}</span>
                <span>TRON Ecosystem Chain(TRC20)</span>
              </li>
            </ul>
          </div>

          <div>
            <div class="fz-16 fw-bold">
              {{ $t(`token.distribution.代币分配`) }}
            </div>

            <ul class="distribution">
              <li>
                <span> {{ $t(`token.distribution.总供应量`) }}：</span>
                <span>13,100,000,000,000 BCNFT</span>
              </li>
              <li>
                <span> {{ $t(`token.distribution.社区空投`) }}：</span>
                <span>991,000,000 BCNFT</span>
              </li>
              <li>
                <span> {{ $t(`token.distribution.技术开发`) }}：</span>
                <span>100,000,000 BCNFT </span>
              </li>
              <li>
                <span> {{ $t(`token.distribution.市场营销`) }}：</span>
                <span>10,000,000,000 BCNFT</span>
              </li>
              <!-- <li>
                <span> {{ $t(`token.distribution.预售`) }}：</span>
                <span>100,000,000  BCNFT </span>
              </li>
              <li>
                <span> {{ $t(`token.distribution.项目未来发展`) }}：</span>
                <span>10,000,000,000  BCNFT</span>
              </li> -->
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
#token {
  .contract {
    font-size: 14px;

    li {
      padding: 10px 0;
      border-bottom: 1px solid var(--color-border);

      span {
        &:first-child {
          display: inline-block;
          margin-right: 10px;
          padding: 5px;
          font-size: 12px;
          font-weight: bolder;
          text-align: center;
          background-color: var(--color-primary);
          color: white;
        }

        &:last-child {
          color: var(--color-basic);
        }
      }
    }
  }

  .distribution {
    font-size: 14px;

    li {
      padding: 10px 0;
      border-bottom: 1px solid var(--color-border);

      span {
        color: var(--color-basic);
      }
    }
  }
}
</style>
